<template>
  <div>
    <el-card>
      <!-- <div> -->
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        label-width="90px"
        style="margin-left: 20px"
      >
        <el-form-item label="" prop="groupLabel">
          <!-- <el-checkbox v-model="checked1" label="类目" border></el-checkbox
          ><br /> -->
          <el-checkbox
            v-model="queryParams.groupSeason"
            label="季节"
            border
            @change="getList"
          ></el-checkbox>
        </el-form-item>
        <el-form-item label="按类目筛选" prop="groupLabel">
          <el-select
            v-model="queryParams.groupLabel"
            placeholder="请选择分组"
            style="width: 150px"
            @change="getList"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_product_age.slice(-3)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="加季节筛选" prop="isReturn">
          
          <el-radio-group
            v-model="groupSeason"
            size="small"
            fill="#66b1ff"
            @change="changeReturn"
          >
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
            
          </el-radio-group>
        </el-form-item>
        <el-form-item label="按季节单选" prop="isReturn">
         
          <el-radio-group
            v-model="groupSeasonRadio"
            size="small"
            fill="#66b1ff"
            @change="changeSeason"
          >
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
            
          </el-radio-group>
        </el-form-item> -->
        <!--  <el-form-item label="" prop="productSeason">
        
          <el-select
            v-model="queryParams.itemList"
            placeholder="请选择商品-产品款号"
            clearable
            multiple
            style="width: 250px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_jijie"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="" prop="productSeason">
          <el-select
            v-model="queryParams.skuList"
            placeholder="请选择商品-sku"
            clearable
            multiple
            style="width: 250px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_jijie"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="dataDate">
          <el-date-picker
            clearable
            v-model="queryParams.dataDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="入仓日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="transactionDate">
          <el-date-picker
            clearable
            v-model="queryParams.transactionDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="出仓日期"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          > -->
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <div slot="header" class="card-box" style="height: 20px">
        <el-col :span="2">
          <span style="font-weight: 600"
            ><i class="el-icon-collection"></i> 库龄详情</span
          >
        </el-col>
        <el-col :span="15">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="" prop="productSeason">
              <el-select
                v-model="queryParams.productSeasonList"
                placeholder="请选择商品-季节"
                clearable
                multiple
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_jijie"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="firstLevelColumnList">
              <el-select
                v-model="queryParams.firstLevelColumnList"
                placeholder="请选择一级类目"
                multiple
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_pl"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="secondLevelColumnList">
              <el-select
                v-model="queryParams.secondLevelColumnList"
                placeholder="请选择二级类目"
                multiple
                clearable
                filterable
              >
                <el-option
                  v-for="dict in dict.type.sys_product_secondary"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="threeLevelColumnList">
              <el-select
                v-model="queryParams.threeLevelColumnList"
                placeholder="请选择三级类目"
                multiple
                clearable
                filterable
                style="width: 150px"
              >
                <el-option
                  v-for="dict in dict.type.sys_product_cycle"
                  :key="dict.label"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </div>

      <u-table
        :data="tableData"
        :height="height"
        use-virtual
        :row-height="rowHeight"
        border
        @cell-click="pricetableEdit"
        @sort-change="handleSortChange"
      >
        <u-table-column type="index" width="100" sortable fixed />
        <!-- <u-table-column
          align="center"
          label="库龄分布"
          width="150"
          fixed
          v-if="this.groupSeasonRadio == true"
        >
          <u-table-column
            align="center"
            prop="productSeason"
            label="产品季节"
            width="150"
          >
          </u-table-column>
        </u-table-column> -->
        <u-table-column align="center" label="库龄分布" width="600" fixed>
          <!-- :width="groupSeasonRadio ? `150` : `300`" -->
          <u-table-column
            align="center"
            prop="productSeason"
            label="产品季节"
            width="150"
          >
          </u-table-column>
          <u-table-column
            align="center"
            label="类目"
            width="150"
            v-if="this.queryParams.groupLabel == ''"
          >
          </u-table-column>
          <u-table-column
            v-if="this.queryParams.groupLabel == '一级'"
            align="center"
            prop="firstLevelColumn"
            label="一级类目"
            width="150"
          >
          </u-table-column>
          <u-table-column
            v-if="this.queryParams.groupLabel == '二级'"
            align="center"
            prop="secondLevelColumn"
            label="二级类目"
            width="150"
          >
          </u-table-column>
          <u-table-column
            v-if="this.queryParams.groupLabel == '三级'"
            align="center"
            prop="threeLevelColumn"
            label="三级类目"
            width="150"
          >
          </u-table-column>
          <u-table-column
            width="100"
            align="center"
            prop="inventoryQuantityTotal"
            label="库存总量"
          >
          </u-table-column>
          <u-table-column
            width="200"
            align="center"
            prop="inventoryAmountTotal"
            label="库存总价值"
          >
          </u-table-column>
        </u-table-column>
        <!-- <u-table-column
          align="center"
          prop="firstLevelColumn"
          label="一级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="secondLevelColumn"
          label="二级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="threeLevelColumn"
          label="三级"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="firstLevelColumn"
          label="颜色"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="secondLevelColumn"
          label="尺码"
          width="150"
        >
        </u-table-column>
        <u-table-column
          align="center"
          prop="threeLevelColumn"
          label="主图"
          width="150"
        >
        </u-table-column>
      -->
        <!-- <u-table-column
            align="center"
            prop="earlyOInWarehouseDate"
            label="最近入库日期"
            width="150"
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="earlyOutWarehouseDate"
            label="最近出库日期"
            width="150"
          >
          </u-table-column> -->

        <u-table-column align="center" label="0~30天">
          <u-table-column
            align="center"
            prop="inventoryQuantity0"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio0"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio0 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount0"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="31~60天">
          <u-table-column
            align="center"
            prop="inventoryQuantity30"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio30"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio30 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount30"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>

        <u-table-column align="center" label="61~90天">
          <u-table-column
            align="center"
            prop="inventoryQuantity60"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio60"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio60 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount60"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="91~120天">
          <u-table-column
            align="center"
            prop="inventoryQuantity90"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio90"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio90 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount90"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="121~150天">
          <u-table-column
            align="center"
            prop="inventoryQuantity120"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio120"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio120 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount120"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="151~180天">
          <u-table-column
            align="center"
            prop="inventoryQuantity150"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio150"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio150 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount150"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="181~240天">
          <u-table-column
            align="center"
            prop="inventoryQuantity180"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio180"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio180 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount180"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="241~300天">
          <u-table-column
            align="center"
            prop="inventoryQuantity240"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio240"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio240 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount240"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="300~365天">
          <u-table-column
            align="center"
            prop="inventoryQuantity300"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmountRatio300"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio300 }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount300"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="1~2年">
          <u-table-column
            align="center"
            prop="inventoryQuantity1Y"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryQuantityRatio1Y"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryQuantityRatio1Y }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount1Y"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="2~3年">
          <u-table-column
            align="center"
            prop="inventoryQuantity2Y"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryQuantityRatio2Y"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryQuantityRatio2Y }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount2Y"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
        <u-table-column align="center" label="3年以上">
          <u-table-column
            align="center"
            prop="inventoryQuantity3Y"
            label="库存数量"
            width="100"
            sortable
          >
          </u-table-column>

          <u-table-column
            align="center"
            prop="inventoryAmountRatio3Y"
            label="库存占比(%)"
            width="100"
          >
            <template slot-scope="scope">
              {{ scope.row.inventoryAmountRatio3Y }}%
            </template>
          </u-table-column>
          <u-table-column
            align="center"
            prop="inventoryAmount3Y"
            label="库存价值"
            width="100"
            sortable
          >
          </u-table-column>
        </u-table-column>
      </u-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.thisPageSize"
        @pagination="getList"
      />
    </el-card>

    <el-row
      style="
        background: #fff;

        margin-bottom: 32px;
      "
    >
      <div
        style="
          margin-left: 2px;
          margin-right: 2px;
          height: 460px;
          width: 1700px;
        "
        id="mainRaddar"
      ></div>
      <div
        style="
          margin-left: 2px;
          margin-right: 2px;
          height: 460px;
          width: 1700px;
        "
        id="echartsRaddar"
      ></div>
    </el-row>
    <!-- width: 100%;  -->
  </div>
</template>

  <script>
import * as echarts from "echarts/lib/echarts.js";
import {
  listBiInventoryAgeDwd,
  getBiInventoryAgeDwd,
  delBiInventoryAgeDwd,
  addBiInventoryAgeDwd,
  updateBiInventoryAgeDwd,
  synData,
  inventoryAgeDetail,
} from "@/api/Warehouse/BiInventoryAgeDwd";
export default {
  dicts: [
    "sys_product_age",
    "sys_product_item",
    "sys_product_secondary",
    "sys_product_cycle",
    "sys_product_pl",
    "sys_product_jijie",
  ],
  data() {
    return {
      checked1: true,
      groupSeasonRadio: false,
      groupSeason: false,
      //价格带
      list: [],

      height: 630,
      rowHeight: 50,
      tableData: [],
      // tableData: Array.from({ length: 5 }, (_, idx) => ({
      //   id: idx + 1,
      //   date: "2016-05-03",
      //   name: "王小虎",
      //   province: "上海",
      //   city: "普陀区",
      //   address: "上海市普陀区金沙江路 1518 弄",
      //   zip: 200333,
      // })),
      total: 0,
      // 查询参数
      queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        groupLabel: "一级",
        groupSeason: false,
        pageNum: 1,
        thisPageSize: 10,
        property: "inventoryQuantity0",
        isAsc: false,
        // sku: null,
        // inventoryAgeDays: null,
        // inventoryAgeDateRange: null,
        // inventoryQuantity: null,
        // inventoryAmount: null,
        // firstLevelColumnList: null,
        // secondLevelColumnList: null,
        // threeLevelColumnList: null,
        // productSeasonList: null,
        // groupLabel: null,
        // itemList: null,
        // skuList: null,
        // dataDate: null,
        // transactionDate: null,
      },
    };
  },
  /** 一级 */
  // private List<String> firstLevelColumnList;
  // /** 一级 */
  // private List<String> secondLevelColumnList;

  // /** 三级 */
  // private List<String> threeLevelColumnList;

  // /** 产品季节 */
  // private List<String> productSeasonList;

  // /** 产品款号 */
  // private List<String> itemList;

  // /** sku */
  // private List<String> skuList;
  // private String sku;

  // /** 分组 */
  // private String groupLabel;

  // /** 是否按季节分组 */
  // private Boolean groupSeason;

  // /** 入仓日期 */
  // private Date dataDate;

  // /**出仓日期*/
  // private Date transactionDate;
  created() {
    // console.log(JSON.stringify(this.tableData));
    this.getList();
  },
  methods: {
    //价格带
    pricetableEdit(row, column, cell, event) {
      if (
        this.queryParams.groupLabel == "二级" &&
        this.queryParams.groupSeason == false
      ) {
        //请求前初始化

        // Raddar.dispose();
        // let list = [];
        let note = [];
        let Amount = [];
        if (event.ctrlKey) {
          //如果ctr1按下就让他按下的标识符变为true
          var m = [];
          this.list.forEach((item) => {
            m.push(item.secondLevelColumn);
          });
          let filteredArray = m.filter(function (item) {
            // if (row.sourceName) {
            //   return item == row.sourceName;
            // } else {
            //   return item == row.label;
            // }
            return item == row.secondLevelColumn;
          });

          if (filteredArray.length > 0) {
            this.$modal.msgError("你选择的品类重复，请重新选择");
            return;
          } else {
            this.list.push(row);
          }
        }
        const keyArray = this.list.map((item) => item.secondLevelColumn);

        this.list.forEach((item, index) => {
          note.push({
            name: item.secondLevelColumn,
            type: "bar",
            // step: "start",
            data: [
              item.inventoryQuantity0,
              item.inventoryQuantity30,
              item.inventoryQuantity60,
              item.inventoryQuantity90,
              item.inventoryQuantity120,
              item.inventoryQuantity150,
              item.inventoryQuantity180,
              item.inventoryQuantity240,
              item.inventoryQuantity300,
              item.inventoryQuantity1Y,
              item.inventoryQuantity2Y,
              item.inventoryQuantity3Y,
              // `${person.firstPriceRangeNum}, ${person.secondPriceRangeNum},${person.thirdPriceRangeNum}, ${person.fourthPriceRangeNum},${person.fifthPriceRangeNum}, ${person.sixthPriceRangeNum},${person.seventhPriceRangeNum}, ${person.eighthPriceRangeNum}`,
            ],
          });
          Amount.push({
            name: item.secondLevelColumn,
            type: "bar",
            // step: "start",
            data: [
              item.inventoryAmount0,
              item.inventoryAmount30,
              item.inventoryAmount60,
              item.inventoryAmount90,
              item.inventoryAmount120,
              item.inventoryAmount150,
              item.inventoryAmount180,
              item.inventoryAmount240,
              item.inventoryAmount300,
              item.inventoryAmount1Y,
              item.inventoryAmount2Y,
              item.inventoryAmount3Y,
            ],
          });
        });
        console.log(JSON.stringify(note));
        this.myRaddar(keyArray, note);
        this.inventoryAmount(keyArray, Amount);
      } else if (
        this.queryParams.groupLabel == "三级" &&
        this.queryParams.groupSeason == false
      ) {
        //请求前初始化

        // Raddar.dispose();
        // let list = [];
        let note = [];
        let Amount = [];
        if (event.ctrlKey) {
          //如果ctr1按下就让他按下的标识符变为true
          var m = [];
          this.list.forEach((item) => {
            m.push(item.threeLevelColumn);
          });
          let filteredArray = m.filter(function (item) {
            // if (row.sourceName) {
            //   return item == row.sourceName;
            // } else {
            //   return item == row.label;
            // }
            return item == row.threeLevelColumn;
          });

          if (filteredArray.length > 0) {
            this.$modal.msgError("你选择的品类重复，请重新选择");
            return;
          } else {
            this.list.push(row);
          }
        }
        const keyArray = this.list.map((item) => item.threeLevelColumn);

        this.list.forEach((item, index) => {
          note.push({
            name: item.threeLevelColumn,
            type: "bar",
            // step: "start",
            data: [
              item.inventoryQuantity0,
              item.inventoryQuantity30,
              item.inventoryQuantity60,
              item.inventoryQuantity90,
              item.inventoryQuantity120,
              item.inventoryQuantity150,
              item.inventoryQuantity180,
              item.inventoryQuantity240,
              item.inventoryQuantity300,
              item.inventoryQuantity1Y,
              item.inventoryQuantity2Y,
              item.inventoryQuantity3Y,
              // `${person.firstPriceRangeNum}, ${person.secondPriceRangeNum},${person.thirdPriceRangeNum}, ${person.fourthPriceRangeNum},${person.fifthPriceRangeNum}, ${person.sixthPriceRangeNum},${person.seventhPriceRangeNum}, ${person.eighthPriceRangeNum}`,
            ],
          });
          Amount.push({
            name: item.threeLevelColumn,
            type: "bar",
            // step: "start",
            data: [
              item.inventoryAmount0,
              item.inventoryAmount30,
              item.inventoryAmount60,
              item.inventoryAmount90,
              item.inventoryAmount120,
              item.inventoryAmount150,
              item.inventoryAmount180,
              item.inventoryAmount240,
              item.inventoryAmount300,
              item.inventoryAmount1Y,
              item.inventoryAmount2Y,
              item.inventoryAmount3Y,
            ],
          });
        });
        console.log(JSON.stringify(note));
        this.myRaddar(keyArray, note);
        this.inventoryAmount(keyArray, Amount);
      } else if (this.queryParams.groupSeason == true) {
        //请求前初始化

        // Raddar.dispose();
        // let list = [];
        let note = [];
        let Amount = [];
        if (event.ctrlKey) {
          //如果ctr1按下就让他按下的标识符变为true
          var m = [];
          this.list.forEach((item) => {
            m.push(item.gradeSeason);
          });
          let filteredArray = m.filter(function (item) {
            // if (row.sourceName) {
            //   return item == row.sourceName;
            // } else {
            //   return item == row.label;
            // }
            return item == row.gradeSeason;
          });

          if (filteredArray.length > 0) {
            this.$modal.msgError("你选择的品类重复，请重新选择");
            return;
          } else {
            this.list.push(row);
          }
        }
        const keyArray = this.list.map((item) => item.gradeSeason);

        this.list.forEach((item, index) => {
          note.push({
            name: item.gradeSeason,
            type: "bar",
            // step: "start",
            data: [
              item.inventoryQuantity0,
              item.inventoryQuantity30,
              item.inventoryQuantity60,
              item.inventoryQuantity90,
              item.inventoryQuantity120,
              item.inventoryQuantity150,
              item.inventoryQuantity180,
              item.inventoryQuantity240,
              item.inventoryQuantity300,
              item.inventoryQuantity1Y,
              item.inventoryQuantity2Y,
              item.inventoryQuantity3Y,
              // `${person.firstPriceRangeNum}, ${person.secondPriceRangeNum},${person.thirdPriceRangeNum}, ${person.fourthPriceRangeNum},${person.fifthPriceRangeNum}, ${person.sixthPriceRangeNum},${person.seventhPriceRangeNum}, ${person.eighthPriceRangeNum}`,
            ],
          });
          Amount.push({
            name: item.gradeSeason,
            type: "bar",
            // step: "start",
            data: [
              item.inventoryAmount0,
              item.inventoryAmount30,
              item.inventoryAmount60,
              item.inventoryAmount90,
              item.inventoryAmount120,
              item.inventoryAmount150,
              item.inventoryAmount180,
              item.inventoryAmount240,
              item.inventoryAmount300,
              item.inventoryAmount1Y,
              item.inventoryAmount2Y,
              item.inventoryAmount3Y,
            ],
          });
        });
        console.log(JSON.stringify(note));
        this.myRaddar(keyArray, note);
        this.inventoryAmount(keyArray, Amount);
      }
    },
    //是否按季节分组
    changeReturn(val) {
      if (val == false) {
        this.queryParams.productSeasonList = null;
      }
      if (val == true) {
        this.queryParams.groupSeason = true;
        this.groupSeasonRadio = false;
      }
      this.getList();
    },
    changeSeason(val) {
      if (val == false) {
        this.queryParams.productSeasonList = null;
      }
      if (val == true) {
        this.pageNum = 1;
        this.queryParams.groupSeason = true;
        this.queryParams.groupLabel = null;
      }
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.thisPageSize = 10;
      // this.queryParams.pageNum = 1;
      // this.queryParams.pageSize = 10;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {};
      this.queryParams.groupLabel = "一级";
      this.queryParams.groupSeason = false;
      this.queryParams.isAsc = false;
      this.queryParams.property = "inventoryQuantity0";
      this.handleQuery();
    },
    handleSortChange(column) {
      /**
  排序方向 asc 升序 desc 降序
 
private String orderDirection;*/
      switch (column.order) {
        case "ascending":
          this.queryParams.isAsc = true;
          break;
        case "descending":
          this.queryParams.isAsc = false;
          break;
        default:
          this.queryParams.isAsc = null;
          break;
      }
      this.queryParams.property = column.prop; //查询字段是表格中字段名字
      // this.queryParams.orderDirection = column.order;//动态取值排序顺序

      this.getList();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    /** 查询库龄列表 */
    getList() {
      if (
        this.queryParams.groupLabel == "" &&
        this.queryParams.groupSeason == false
      ) {
        this.$modal.msgError("至少选择一个分组条件");
        return;
      }
      this.list = [];
      // Raddar.dispose();
      // this.loading = true;
      this.openLoading();
      inventoryAgeDetail(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.tableData = response.data;
        this.total = response.totalCount;
        // this.total = response.total;
        // this.loading = false;

        if (
          this.queryParams.groupLabel == "一级" &&
          this.queryParams.groupSeason == false
        ) {
          let note = [];
          let Amount = [];
          const keyArray = this.tableData.map((item) => item.firstLevelColumn);

          this.tableData.forEach((item, index) => {
            // if (index > 2) {
            //   return;
            // }

            note.push({
              name: item.firstLevelColumn,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryQuantity0,
                item.inventoryQuantity30,
                item.inventoryQuantity60,
                item.inventoryQuantity90,
                item.inventoryQuantity120,
                item.inventoryQuantity150,
                item.inventoryQuantity180,
                item.inventoryQuantity240,
                item.inventoryQuantity300,
                item.inventoryQuantity1Y,
                item.inventoryQuantity2Y,
                item.inventoryQuantity3Y,
              ],
            });
            Amount.push({
              name: item.firstLevelColumn,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryAmount0,
                item.inventoryAmount30,
                item.inventoryAmount60,
                item.inventoryAmount90,
                item.inventoryAmount120,
                item.inventoryAmount150,
                item.inventoryAmount180,
                item.inventoryAmount240,
                item.inventoryAmount300,
                item.inventoryAmount1Y,
                item.inventoryAmount2Y,
                item.inventoryAmount3Y,
              ],
            });
          });
          console.log(JSON.stringify(note));
          this.myRaddar(keyArray, note);
          this.inventoryAmount(keyArray, Amount);
        } else if (
          this.queryParams.groupLabel == "二级" &&
          this.queryParams.groupSeason == false
        ) {
          let note = [];
          let Amount = [];
          const keyArray = this.tableData.map((item) => item.secondLevelColumn);

          this.tableData.forEach((item, index) => {
            if (index > 3) {
              return;
            }

            note.push({
              name: item.secondLevelColumn,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryQuantity0,
                item.inventoryQuantity30,
                item.inventoryQuantity60,
                item.inventoryQuantity90,
                item.inventoryQuantity120,
                item.inventoryQuantity150,
                item.inventoryQuantity180,
                item.inventoryQuantity240,
                item.inventoryQuantity300,
                item.inventoryQuantity1Y,
                item.inventoryQuantity2Y,
                item.inventoryQuantity3Y,
              ],
            });
            Amount.push({
              name: item.secondLevelColumn,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryAmount0,
                item.inventoryAmount30,
                item.inventoryAmount60,
                item.inventoryAmount90,
                item.inventoryAmount120,
                item.inventoryAmount150,
                item.inventoryAmount180,
                item.inventoryAmount240,
                item.inventoryAmount300,
                item.inventoryAmount1Y,
                item.inventoryAmount2Y,
                item.inventoryAmount3Y,
              ],
            });
          });
          console.log(JSON.stringify(note));
          this.myRaddar(keyArray, note);
          this.inventoryAmount(keyArray, Amount);
        } else if (
          this.queryParams.groupLabel == "三级" &&
          this.queryParams.groupSeason == false
        ) {
          let note = [];
          let Amount = [];
          const keyArray = this.tableData.map((item) => item.threeLevelColumn);

          this.tableData.forEach((item, index) => {
            if (index > 3) {
              return;
            }

            note.push({
              name: item.threeLevelColumn,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryQuantity0,
                item.inventoryQuantity30,
                item.inventoryQuantity60,
                item.inventoryQuantity90,
                item.inventoryQuantity120,
                item.inventoryQuantity150,
                item.inventoryQuantity180,
                item.inventoryQuantity240,
                item.inventoryQuantity300,
                item.inventoryQuantity1Y,
                item.inventoryQuantity2Y,
                item.inventoryQuantity3Y,
              ],
            });
            Amount.push({
              name: item.threeLevelColumn,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryAmount0,
                item.inventoryAmount30,
                item.inventoryAmount60,
                item.inventoryAmount90,
                item.inventoryAmount120,
                item.inventoryAmount150,
                item.inventoryAmount180,
                item.inventoryAmount240,
                item.inventoryAmount300,
                item.inventoryAmount1Y,
                item.inventoryAmount2Y,
                item.inventoryAmount3Y,
              ],
            });
          });
          console.log(JSON.stringify(note));
          this.myRaddar(keyArray, note);
          this.inventoryAmount(keyArray, Amount);
        }

        if (
          this.queryParams.groupLabel == "一级" &&
          this.queryParams.groupSeason == true
        ) {
          let note = [];
          let Amount = [];
          const keyArray = this.tableData.map((item) => item.gradeSeason);

          this.tableData.forEach((item, index) => {
            // if (index > 2) {
            //   return;
            // }

            note.push({
              name: item.gradeSeason,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryQuantity0,
                item.inventoryQuantity30,
                item.inventoryQuantity60,
                item.inventoryQuantity90,
                item.inventoryQuantity120,
                item.inventoryQuantity150,
                item.inventoryQuantity180,
                item.inventoryQuantity240,
                item.inventoryQuantity300,
                item.inventoryQuantity1Y,
                item.inventoryQuantity2Y,
                item.inventoryQuantity3Y,
              ],
            });
            Amount.push({
              name: item.gradeSeason,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryAmount0,
                item.inventoryAmount30,
                item.inventoryAmount60,
                item.inventoryAmount90,
                item.inventoryAmount120,
                item.inventoryAmount150,
                item.inventoryAmount180,
                item.inventoryAmount240,
                item.inventoryAmount300,
                item.inventoryAmount1Y,
                item.inventoryAmount2Y,
                item.inventoryAmount3Y,
              ],
            });
          });
          console.log(JSON.stringify(note));
          this.myRaddar(keyArray, note);
          this.inventoryAmount(keyArray, Amount);
        } else if (
          this.queryParams.groupLabel == "二级" &&
          this.queryParams.groupSeason == true
        ) {
          let note = [];
          let Amount = [];
          const keyArray = this.tableData.map((item) => item.gradeSeason);

          this.tableData.forEach((item, index) => {
            if (index > 3) {
              return;
            }

            note.push({
              name: item.gradeSeason,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryQuantity0,
                item.inventoryQuantity30,
                item.inventoryQuantity60,
                item.inventoryQuantity90,
                item.inventoryQuantity120,
                item.inventoryQuantity150,
                item.inventoryQuantity180,
                item.inventoryQuantity240,
                item.inventoryQuantity300,
                item.inventoryQuantity1Y,
                item.inventoryQuantity2Y,
                item.inventoryQuantity3Y,
              ],
            });
            Amount.push({
              name: item.gradeSeason,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryAmount0,
                item.inventoryAmount30,
                item.inventoryAmount60,
                item.inventoryAmount90,
                item.inventoryAmount120,
                item.inventoryAmount150,
                item.inventoryAmount180,
                item.inventoryAmount240,
                item.inventoryAmount300,
                item.inventoryAmount1Y,
                item.inventoryAmount2Y,
                item.inventoryAmount3Y,
              ],
            });
          });
          console.log(JSON.stringify(note));
          this.myRaddar(keyArray, note);
          this.inventoryAmount(keyArray, Amount);
        } else if (
          this.queryParams.groupLabel == "三级" &&
          this.queryParams.groupSeason == true
        ) {
          let note = [];
          let Amount = [];
          const keyArray = this.tableData.map((item) => item.gradeSeason);

          this.tableData.forEach((item, index) => {
            if (index > 3) {
              return;
            }

            note.push({
              name: item.gradeSeason,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryQuantity0,
                item.inventoryQuantity30,
                item.inventoryQuantity60,
                item.inventoryQuantity90,
                item.inventoryQuantity120,
                item.inventoryQuantity150,
                item.inventoryQuantity180,
                item.inventoryQuantity240,
                item.inventoryQuantity300,
                item.inventoryQuantity1Y,
                item.inventoryQuantity2Y,
                item.inventoryQuantity3Y,
              ],
            });
            Amount.push({
              name: item.gradeSeason,
              type: "bar",
              // step: "start",
              data: [
                item.inventoryAmount0,
                item.inventoryAmount30,
                item.inventoryAmount60,
                item.inventoryAmount90,
                item.inventoryAmount120,
                item.inventoryAmount150,
                item.inventoryAmount180,
                item.inventoryAmount240,
                item.inventoryAmount300,
                item.inventoryAmount1Y,
                item.inventoryAmount2Y,
                item.inventoryAmount3Y,
              ],
            });
          });
          console.log(JSON.stringify(note));
          this.myRaddar(keyArray, note);
          this.inventoryAmount(keyArray, Amount);
        }
      });
    },
    myRaddar(keyArray, note) {
      const option = {
        title: {
          text: "库存数量",
        },
        grid: {
          left: "5%",
          top: "10%",
          right: "3%",
          bottom: "10%",
        },
        // 提示框
        tooltip: { trigger: "axis" },
        xAxis: {
          type: "category",
          data: [
            "0~30天",
            "31~60天",
            "61~90天",
            "91~120天",
            "121~150天",
            "151~180天",
            "181~240天",
            "241~300天",
            "300~365天",
            "1~2年",
            "2~3年",
            "3年以上",
          ],
        },
        yAxis: { type: "value" },
        legend: {
          data: keyArray,
        },
        series: note,
      };

      //

      var myChartDom = document.getElementById("mainRaddar");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);
    },
    inventoryAmount(keyArray, note) {
      const option = {
        title: {
          text: "库存金额",
        },
        grid: {
          left: "5%",
          top: "10%",
          right: "3%",
          bottom: "10%",
        },
        // 提示框
        tooltip: { trigger: "axis" },
        xAxis: {
          type: "category",
          data: [
            "0~30天",
            "31~60天",
            "61~90天",
            "91~120天",
            "121~150天",
            "151~180天",
            "181~240天",
            "241~300天",
            "300~365天",
            "1~2年",
            "2~3年",
            "3年以上",
          ],
        },
        yAxis: { type: "value" },
        legend: {
          data: keyArray,
        },
        series: note,
      };

      //

      var myChartDom = document.getElementById("echartsRaddar");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "financial/BiInventoryAgeDwd/detailExport",
        {
          ...this.queryParams,
        },
        `BiInventoryAgeDwd_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

    /** 一级 */
    @Excel(name = "一级")
    private String firstLevelColumn;
    /** 一级 */
    @Excel(name = "二级")
    private String secondLevelColumn;

    /** 三级 */
    @Excel(name = "三级")
    private String threeLevelColumn;

    /** 产品季节 */
    @Excel(name = "产品季节")
    private String productSeason;

    /** 产品款号 */
    @Excel(name = "产品款号")
    private String item;

    /** sku */
    @Excel(name = "sku")
    private String sku;

    /** 最近入库时间 */
    @Excel(name = "最近入库时间")
    private Date earlyOInWarehouseDate;

    /** 最近出库时间 */
    @Excel(name = "最近出库时间")
    private Date earlyOutWarehouseDate;

    /** 0~30天库存量 */
    @Excel(name = " 0~30天库存量")
    private Integer inventoryQuantity;

    /** 0~30天库存金额 */
    @Excel(name = "0~30天库存金额")
    private Double inventoryAmount;

    /** 31~60天库存量 */
    @Excel(name = "31~60天库存量")
    private Integer inventoryQuantity30;

    /** 31~60天库存金额 */
    @Excel(name = "31~60天库存金额")
    private Double inventoryAmount30;

    /** 61~90天库存量 */
    @Excel(name = "61~90天库存量")
    private Integer inventoryQuantity60;

    /** 61~90天库存金额 */
    @Excel(name = "61~90天库存金额")
    private Double inventoryAmount60;

    /** 91~120天库存量 */
    @Excel(name = "91~120天库存量")
    private Integer inventoryQuantity90;

    /** 91~120天库存金额 */
    @Excel(name = "91~120天库存金额")
    private Double inventoryAmount90;

    /** 121~150天库存量 */
    @Excel(name = "121~150天库存量")
    private Integer inventoryQuantity120;

    /** 121~150天库存金额 */
    @Excel(name = "121~150天库存金额")
    private Double inventoryAmount120;

    /** 151~180天库存量 */
    @Excel(name = "151~180天库存量")
    private Integer inventoryQuantity150;

    /** 151~180天库存金额 */
    @Excel(name = "151~180天库存金额")
    private Double inventoryAmount150;

    /** 181~240天库存量 */
    @Excel(name = "181~240天库存量")
    private Integer inventoryQuantity180;

    /** 181~240天库存金额 */
    @Excel(name = "181~240天库存金额")
    private Double inventoryAmount180;

    /** 241~300天库存量 */
    @Excel(name = "241~300天库存量")
    private Integer inventoryQuantity240;

    /** 241~300天库存金额 */
    @Excel(name = "241~300天库存金额")
    private Double inventoryAmount240;

    /** 300~365天库存量 */
    @Excel(name = "300~365天库存量")
    private Integer inventoryQuantity300;

    /** 300~365天库存金额 */
    @Excel(name = "300~365天库存金额")
    private Double inventoryAmount300;

    /** 1~2年库存量 */
    @Excel(name = "1~2年库存量")
    private Integer inventoryQuantity1Y;

    /** 1~2年库存金额 */
    @Excel(name = "1~2年库存金额")
    private Double inventoryAmount1Y;

    /** 2~3年库存量 */
    @Excel(name = "2~3年库存量")
    private Integer inventoryQuantity2Y;

    /** 2~3年库存金额 */
    @Excel(name = "2~3年库存金额")
    private Double inventoryAmount2Y;

    /** 3年以上库存量 */
    @Excel(name = "3年以上库存量")
    private Integer inventoryQuantity3Y;

    /** 3年以上库存金额 */
    @Excel(name = "3年以上库存金额")
    private Double inventoryAmount3Y;
sku/item/三级/二级/一级